<template>
	<!-- 底部导航 -->
	<view class="tab-bar">
		<view class="tab-bar-item" v-for="(item, index) in tabberMenu" :key="index"
			@click="tabbarChange(item.pagePath)">
			<image class="tab_img" :src='item.selectedIconPath' v-if="current == index"></image>
			<image class="tab_img" :src='item.iconPath' v-else></image>
			<view class="tab_text" :class="{'tab_text1' : current == index}">{{item.text}}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch} from 'vue';

	const curPath = ref('')
	
	watch(curPath, () => {
		const pages = getCurrentPages()
		curPath.value = pages.slice(-1)[0].route
	}, {
		immediate: true,
		deep: true
	})
	const student = [{
		pagePath: "/pages/tabBar/student/recruit",
		text: "应聘",
		iconPath: "/static/images/tabBar/recruit.png",
		selectedIconPath: "/static/images/tabBar/recruit1.png",
	}, {
		pagePath: "/pages/tabBar/student/activity",
		text: "活动",
		iconPath: "/static/images/tabBar/activity.png",
		selectedIconPath: "/static/images/tabBar/activity1.png",
	}, {
		pagePath: "/pages/tabBar/student/consult",
		text: "咨询",
		iconPath: "/static/images/tabBar/consult.png",
		selectedIconPath: "/static/images/tabBar/consult1.png",
	}, {
		pagePath: "/pages/tabBar/student/user",
		text: "我的",
		iconPath: "/static/images/tabBar/user.png",
		selectedIconPath: "/static/images/tabBar/user1.png",
	}]
	const teacher = [{
		pagePath: "/pages/tabBar/teacher/consult",
		text: "咨询",
		iconPath: "/static/images/tabBar/consult.png",
		selectedIconPath: "/static/images/tabBar/consult1.png",
	}, {
		pagePath: "/pages/tabBar/teacher/user",
		text: "我的",
		iconPath: "/static/images/tabBar/user.png",
		selectedIconPath: "/static/images/tabBar/user1.png",
	}];
	const tabberMenu = computed(() => {
		let userType = uni.getStorageSync('userType')
		if (userType == 1 ) { //student
			return student
		}
		if (userType == 2 ) { //teacher
			return teacher
		}
	})
	const current = computed(() => tabberMenu.value?.findIndex(o => o.pagePath.includes(curPath.value)))
	const tabbarChange = (path) => {
		uni.reLaunch({
			url: path,
		});
	}
</script>
<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 999;

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 37rpx;
				height: 41rpx;
			}

			.tab_text {
				color: #7a7e83;
				font-size: 20rpx;
				margin-top: 9rpx;
				line-height: 1.8;
			}

			.tab_text1 {
				color: #2b9395;
			}
		}
	}
</style>